<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="go-debug.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.36/go-debug.js"></script> -->
    <style>
        canvas{
            outline: none;
        }
    </style>
</head>
<body>
    <div id="myDiagramDiv"  style="width:1000px; height:500px; background-color: #DAE4E4;margin: 0 auto"></div> 
    <script>
            var $go = go.GraphObject.make;
            var myDiagram =$go(go.Diagram, "myDiagramDiv",
                {
                    "undoManager.isEnabled": true,
                    "toolManager.mouseWheelBehavior":go.ToolManager.WheelNone,//禁止滚动
                    "initialContentAlignment": go.Spot.Top, // 居中显示内容
                    "layout": $go(go.TreeLayout,{ angle: 90, layerSpacing: 35 }), //图表展示角度angle：0 为横向 angle：90 为纵向
                    "draggingTool.dragsTree": false,//允许拖拽
                });

        myDiagram.nodeTemplate = $go(go.Node, "Horizontal",{
	        background: "rgba(242, 242, 242, 1)" ,movable:false},
	        new go.Binding("background", "nodeType",function(v){ 
                if(v==1){
                    return "rgba(204, 254, 254, 1)"
                }else{
                    return "rgba(242, 242, 242, 1)"
                }
	         }),
            $go(go.Panel, "Vertical",{ margin: 3 ,width:150},//矩形容器内边距以及宽度设置
            $go(go.TextBlock, "Default Text",{ margin: 12, stroke: "#000", font: "bold 16px sans-serif"},
            //树状图根据后端传的数据设置名称
            new go.Binding("text","treeNodeName"))
            )
	    );
        myDiagram.linkTemplate =$go(go.Link, go.Link.Orthogonal,
		      { deletable: false, corner: 6 , selectable: false},//连线圆角角度
		      $go(go.Shape,
		        { strokeWidth: 2 ,toArrow: "OpenTriangle",stroke: "#0299CC",}  //线条宽度
		      )
        ); 
           var  myModel = $go(go.TreeModel);
           myModel.nodeDataArray =[{
               "key":"1",
               "parent":"0",
               "treeNodeName":"前哨",
               "nodeType":"0"
           },{
               "key":"2",
               "parent":"1",
               "treeNodeName":"手术",
               "nodeType":"1"
           },{
               "key":"3",
               "parent":"1",
               "treeNodeName":"淋巴",
               "nodeType":"0"
           }]
           myDiagram.model = myModel; 
    </script>
</body>
</html>